<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>入党申请书详情</title>
		<style>
			body {
				font-family: 'Microsoft YaHei', sans-serif;
				line-height: 1.6;
				color: #333;
				max-width: 1000px;
				margin: 0 auto;
				padding: 20px;
				background-color: #f5f5f5;
			}

			.container {
				background-color: white;
				padding: 30px;
				border-radius: 5px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}

			h1 {
				color: #c00;
				text-align: center;
				margin-bottom: 30px;
				border-bottom: 2px solid #c00;
				padding-bottom: 10px;
			}

			.applicant-info {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15px;
				margin-bottom: 20px;
			}

			.info-item {
				margin-bottom: 10px;
			}

			.info-label {
				font-weight: bold;
				color: #666;
			}

			.info-value {
				margin-left: 5px;
			}

			.section {
				margin-bottom: 25px;
			}

			.section-title {
				font-size: 18px;
				font-weight: bold;
				color: #c00;
				margin-bottom: 10px;
				border-left: 4px solid #c00;
				padding-left: 10px;
			}

			.section-content {
				padding: 10px;
				background-color: #f9f9f9;
				border-radius: 3px;
				white-space: pre-wrap;
			}

			.handwritten-doc {
				text-align: center;
				margin-top: 20px;
			}

			.handwritten-doc img {
				max-width: 100%;
				border: 1px solid #ddd;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			}

			.footer {
				margin-top: 30px;
				text-align: right;
				color: #666;
			}

			.btn-group {
				margin-top: 20px;
				text-align: center;
			}

			.btn {
				display: inline-block;
				padding: 8px 20px;
				margin: 0 10px;
				background-color: #c00;
				color: white;
				text-decoration: none;
				border-radius: 4px;
				border: none;
				cursor: pointer;
			}

			.btn:hover {
				background-color: #a00;
			}

			.btn-secondary {
				background-color: #666;
			}

			.btn-secondary:hover {
				background-color: #555;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>入党申请书详情</h1>
			<div id="content-page">
				<div class="applicant-info">
					<div class="info-item">
						<span class="info-label">关联用户ID：</span>
						<span class="info-value" id="userId">{{info.userId}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">姓名：</span>
						<span class="info-value" id="name">{{info.name}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">性别：</span>
						<span class="info-value" id="gender">{{info.gender}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">出生日期：</span>
						<span class="info-value" id="birthdate">{{info.birthdate}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">民族：</span>
						<span class="info-value" id="nation">{{info.nation}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">学历：</span>
						<span class="info-value" id="edu-level">{{info.eduLevel}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">联系电话：</span>
						<span class="info-value" id="phone-num">{{info.phoneNum}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">工作单位：</span>
						<span class="info-value" id="employer">{{info.employer}}</span>
					</div>
					<div class="info-item">
						<span class="info-label">申请日期：</span>
						<span class="info-value" id="apply-date">{{info.applyDate}}</span>
					</div>
				</div>

				<div class="section">
					<div class="section-title">入党动机</div>
					<div class="section-content" id="apply-motive">{{info.applyMotive}}</div>
				</div>

				<div class="section">
					<div class="section-title">自我介绍</div>
					<div class="section-content" id="self-intro">{{info.selfIntro}}</div>
				</div>

				<div class="section">
					<div class="section-title">手写申请书</div>
					<div class="handwritten-doc">
						<img id="handwritten-doc-img" :src="info.handwrittenDoc" alt="手写申请书">
					</div>
				</div>
		


				<div class="btn-group">
					<button class="btn btn-secondary" @click="rejectApplication()">返回</button>
				</div>
			</div>

			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script type="text/javascript" src="js/bootstrap.min.js"></script>
			<script type="text/javascript" src="js/main.min.js"></script>
			<script type="text/javascript" src="js/vue.js"></script>
			<script src="js/jconfirm/jquery-confirm.min.js"></script>
			<script type="text/javascript" src="js/lib/layui/layui.js"></script>
			<script>
				//轻量级框架
				var dataInfo = new Vue({
					el: "#content-page",
					//Vue的数据对象
					data: {
						serverList: [], //数据列表
						info: {}, //对象
						scenicTypeList: [], //旅游路线类型
						selectInfo: {}
					}, //数据对象结束
					//方法
					methods: {
						GetAll: function() {
							var me = this;
							const urlParams = new URLSearchParams(window.location.search);
							const appId = urlParams.get('id');
							$.ajax({
								type: "POST",
								url: "http://127.0.0.1:8081/party/application/detail?id=" + appId,
								contentType: "application/json",
								data: JSON.stringify(me.selectInfo),
								dataType: "json",
								success: function(json) {
									me.info = json.application;
								}
							});

						},
						rejectApplication() {
							location.href = "partyApplicationList.html";
						}

					}, //方法结束
					created: function() {
						var vm = this;
						vm.GetAll();
					}, //初始加载方法结束
					filters: {
						dateFormat: function(dateStr, pattern = '') {
							var dt = new Date(dateStr)
							// yyyy-mm-dd
							var y = dt.getFullYear()
							var m = (dt.getMonth() + 1).toString().padStart(2, '0')
							var d = dt.getDate().toString().padStart(2, '0')

							if (pattern.toLowerCase() === 'yyyy-mm-dd') {
								return `${y}-${m}-${d}`
							} else {
								var hh = dt.getHours()
								var mm = dt.getMinutes().toString().padStart(2, '0')
								var ss = dt.getSeconds().toString().padStart(2, '0')
								return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
							}
						}

					}
				}); //vue结束
			</script>
	</body>
</html>